<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@page import="com.wanmait.movies.vo.Movie"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>首页</title>
	<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
	    /*
	    	首页完成功能
	    		1.轮播图，数据库中拿出当前上映的五部电影海报，轮播展示，点击进入详情页
	    		2.展示高评分电影，高点赞电影，即将上映电影
	    		3.页面右下角管理员登录
	    */
	    var index = 1;
	    $(function(){
	        $("#container").css("width", $("#container img").css("width"));
	        $("#container").css("height", $("#container img").css("height"));
	        $("#banner").css("height", $("#container img").css("height"));
	        $("#banner").css("width", ($("#container img").css("width").replace("px", "")*$("img").length));
	        $("#next").click(function(){//右箭头
	            donext();
	        }); 
	        $("#prev").click(function(){//左箭头
	            doprev();
	        }); 
	        for(var i = 0; i <= $("span").length; i++){//每个小圆点添加事件
	            $("span[index="+i+"]").click(function(){
	                move($(this).attr("index"));
	            })
	        }
	        var st;
	        function play(){//自动轮播线程
	            st = setInterval(function(){
	                donext();
	            }, 2000);
	        }
	        play(); 
	        $("#container").mouseover(function(){//鼠标放到图片上停止
	            clearInterval(st);
	        })
	        $("#container").mouseleave(function(){//鼠标离开图片继续轮播
	            play();                      
	        });
	         
	        
	    })
	    function move(index){//切换图
	        var temp = index;                
	        $("#banner").css("transition", "1s");
	        if(index == 0){
	            temp = 5;
	        }
	        $("#banner").css("left", -$("#container img").css("width").replace("px", "")*(temp-1) + "px");
	        
	        btnchange(index);
	    }
	    function btnchange(index){//小圆点
	        for(var i = 0; i < $("span").length; i++){
	            $("#container span").eq(i).removeClass();
	        }
	        $("#container span").eq(index-1).addClass("on");
	    }
	    function donext(){
	        if(index == $("#container img").length){
	                index = 0;
	            }
	        
	        move(++index);
	    }
	    function doprev(){
	        if(index == 0){
	                index = $("#container img").length;
	            }
	        move(--index);
	    }
	</script>
	<style type="text/css">
	    body{
	        background-color: #f5f5f5;
	    }
	    
	    #container #banner,
	    #banner li{
	        list-style: none;
	        margin: 0;
	        padding: 0;
	        left:0px;
	        
	    }
	
	    #container #banner{
	        position: absolute;
			overflow: hidden;
	    }
	
	    #container #banner li{
	        float: left;
	    }
	
	    #container #banner li img{
	    	
	        display: block;
	        width: 1200px;
	        height: 400px;
	    }
	
	
	    /*设置父元素定位*/
	    #container{
	        margin: auto;
	        overflow: hidden;
	        position: relative; /*为了给左右按钮 和小圆点*/
	        
	    }
	
	
	    /*小圆点*/
	    #container #buttons{
	        position: absolute; /*小圆点绝对定位*/
	        height: 10px;
	        width: 100px;
	        bottom: 20px;  /*距离底部20px*/
	        left: 46%;  /*左右居中显示*/
	        z-index: 100;
	    }
	
	    #container #buttons span{
	        cursor: pointer;
	        float: left;
	        width: 10px;
	        height: 10px;
	        border-radius: 50%; /*设置成圆*/
	        background: #333;
	        margin-right: 5px;
	    }
	
	    #container #buttons .on{
	        background: #999;
	    }
	
	    /*左右按钮*/
	    #container .arrow{
	        cursor: pointer;
	        display: none;  /*设置暂时不显示*/
	        height: 40px;
	        line-height: 40px;
	        text-align: center;
	        font-size: 36px;
	        font-weight: bold;
	        width: 40px;
	        height: 40px;
	        position: absolute;
	        z-index: 200;
	        top: 180px;
	        background: RGBA(0,0,0,.3);  /*背景透明度*/
	        color: #fff;
	        text-decoration: none;
	    }
	
	    #container #prev{
	        left: 20px;
	    }
	    #container #next{
	        right: 20px;
	    }
	    #container:hover .arrow {
	         display: block;
	    }
	    #second_panel{
	        background-color: white;
	        width: 1100px;   
	        margin: 50px auto;
	        padding-top: 30px;
	        padding-left: 50px; 
	        padding-right: 50px;
	        overflow: hidden;
	    }
	    #second_panel hr{
	        background-color: #f5f5f5;
	        border : 1px solid #f5f5f5;
	         
	        width: 98%;
	        margin: 15px auto;
	    }
	    #second_panel .more{
	         margin-left: 950px;
	    }
	    #second_panel .onemovie{
	        float: left;
	        padding: 40px;
	        width: 180px;
	        height: 300px;
	         
	        margin: auto;
	        vertical-align: middle;
	        text-align: center;
	    }
	    #second_panel .ssp{
	        overflow: hidden;
	    }
	    #second_panel  img{
	        width: 200px;
	        height: 280px;
	    }
	</style>
</head>
<body>
	<jsp:include page="/include/head.jsp"></jsp:include>
	<jsp:include page="/include/neck.jsp"></jsp:include>
	
        <div id="container">
            <!--图片-->
            <ul id="banner">
            <%
            	Movie[] movies = (Movie[])request.getAttribute("lunbotu");
            	for(Movie m : movies){
            		%>
            		<li><a href="/movies/MoviesServlet?action=showovies&movieId=<%=m.getId()%>"><img src="<%=request.getContextPath() %>/images/<%=m.getMoviePoster()%>"></a></li>
            		<%
            	}
            %> 
            </ul>

    <!--伴随移动的小圆点-->
            <div id="buttons">
                <span index="1" class="on"></span>
                <span index="2"></span>
                <span index="3"></span>
                <span index="4"></span>
                <span index="5"></span>
            </div>
            <a href="javascript:void(0);" id="prev" class="arrow">&lt;</a>  <!--向左-->
            <a href="javascript:void(0);" id="next" class="arrow">&gt;</a>  <!--向右-->
            
        </div>
        <div id="second_panel">
            评分最高
            <a class="more" href="/movies/SearchServlet?action=doSearchMore&key=grades&currentPager=1">&lt;&lt;更多</a>
            <hr>
            <div class="ssp">
				<%
					Movie[] movies2 = (Movie[])request.getAttribute("highestScoreMovies");
					for(Movie m : movies2){
						%>
						<div class="onemovie">
                    		<a href="/movies/MoviesServlet?action=showovies&movieId=<%=m.getId()%>"><img src="<%=request.getContextPath() %>/images/<%=m.getMovieImage() %>"></a>
                    		<%=m.getMovieName() %>
               			</div>
						<%
					}
				%>
                 
            </div>
            <br>
            点赞最多
           
            <a class="more" href="/movies/SearchServlet?action=doSearchMore&key=click&currentPager=1">&lt;&lt;更多</a>
            <hr>
            <div class="ssp">
 
                <%
					Movie[] movies3 = (Movie[])request.getAttribute("mostLikeMovies");
					for(Movie m : movies3){
						%>
						<div class="onemovie">
                    		<a href="/movies/MoviesServlet?action=showovies&movieId=<%=m.getId()%>"><img src="<%=request.getContextPath() %>/images/<%=m.getMovieImage() %>"></a>
                    		<%=m.getMovieName() %>
               			</div>
						<%
					}
				%>
            </div>
            <br>
           即将上映
          
            <a class="more" href="/movies/SearchServlet?action=doSearchMore&key=willshow&currentPager=1">&lt;&lt;更多</a>
            <hr>
            <div class="ssp">
 
                <%
					Movie[] movies4 = (Movie[])request.getAttribute("comingInMovies");
					for(Movie m : movies4){
						%>
						<div class="onemovie">
							<a href="/movies/MoviesServlet?action=showovies&movieId=<%=m.getId()%>">
                    		<img src="<%=request.getContextPath() %>/images/<%=m.getMovieImage() %>">
                    		</a>
                    		<%=m.getMovieName() %>
               			 </div>
						<%
					}
				%>
            </div>
            <br>
        </div> 
        <a style="margin-left: 94%;" href="/movies/manegerlog.jsp">管理员登陆</a>
</body>
</html>